<template>
<div>
    <AdminLayout
            :left-fixed="true"
            no-sel-message="请选择公司或部门再进行操作~"
            ref="adminLayout"
        >
            <template #left>
                <div style="height: 100%;" >
                    <SideTree
                        ref="sideTreeRef"
                        @searchAllData="searchAllData"
                        @selectTree="selectTree"
                        @SuccessfuCallbackFn="SuccessfuCallbackFn"
                        @handNameFn="handNameFn" 
                        @createFolder="parentChang" 
                        @handleTreeDelete="handleTreeDelete" 
                        @handleTreeMove="handleTreeMove" />
                </div> 
            </template>
            <main class="page admin-page page-container detail-page">
                <div class="page-title">
                    <div class="left">
                        <span class="btn-back" @click="backFn"></span>
                        <div class="title" @click="backFn">{{ formState.name }}</div>
                    </div>
                    <div v-if="liveMsg.main_type == 2" class="right-option">
                        <div class="option-item" @click="confirmNav">
                            <i class="e-column"></i>
                            <span>编目</span>
                        </div>
                    </div>
                    <div v-if="liveMsg.main_type == 1" class="right-option">
                        <div class="option-item">
                            <i></i>
                            <span>全屏</span>
                        </div>
                        <div class="option-item">
                            <i></i>
                            <span>裁剪</span>
                        </div>
                        <div class="option-item">
                            <i></i>
                            <span>左右翻转</span>
                        </div>
                        <div class="option-item">
                            <i></i>
                            <span>旋转</span>
                        </div>
                    </div>
                </div>
                <div class="media-content">
                    <div class="video-content">
                        <!-- 视频 -->
                        <div v-if="liveMsg.main_type == 2" class="view-video">
                            <div id="player_contarn1" class="view-box"></div>
                        </div>

                        <!-- 图片 -->
                        <div v-if="liveMsg.main_type == 1" class="view-image">
                            <div class="view-box">
                                <a-image :src="encodeURI1(liveMsg.playUrl)" rootClassName="ai_mock_layer" />
                            </div>
                            <div class="view-option">
                                <p>当前尺寸：<span>{{ liveMsg.width }}*{{ liveMsg.height }}</span></p>
                                <div class="view-btn">
                                    <a-button>取消</a-button>
                                    <a-button type="primary">裁切</a-button>
                                </div>
                                <p>&nbsp;</p>
                            </div>
                        </div>

                        <!-- 音频 -->
                        <div class="view-audio" v-if="liveMsg.main_type == 3">
                            <div class="view-wrapper">
                                <!-- <div class='audio-cover'>
                                    <img src="@/assets/img/audio-cover.jpg" class="video-cover" />
                                </div> -->
                                <div id="player_contarn1" class="view-box">
                                </div>
                            </div>
                            <div class="view-audio-text">
                                <p>音频原文<span v-if="loading"><i></i>文字转换中</span></p>
                                <a-skeleton v-if="loading" active :paragraph="{ rows: 10 }" />
                                <div v-else class="audio-text">
                                    <p>近日，我院生物治疗科/生物治疗研究病房马学磊副教授团队在eClinicalMedicine（IF：15.1）上以封面文章形式发表了题目为Efficacy of e-health interventions for smoking cessation management in smokers: a systematic review and meta-analysis的研究论文，对通讯工具和网络信息技术（APP、网页等）提供的远程健康支持作为戒烟支持工具的研究进行了系统综述和meta分析（荟萃分析）。
我院临床医学八年制李燊、屈展和李一阳为共同第一作者，马学磊副教授为通讯作者，我院为第一作者单位。
研究通过meta分析检索了PubMed、Embase和Cochrane Library数据库中截至2022年12月的文献，共筛选了2408篇文章，最终纳入39篇文章、17,351名符合条件的参与者、44项研究进行meta分析。研究的主要结局是（7天和30天的）时点戒烟率，次要结局是持续戒烟率。meta分析显示，与传统的戒烟干预措施（传统的标准护理，包括发放戒烟手册、口头宣教）相比，远程健康干预措施可以增加吸烟者的时点戒烟率（RR为1.86, 95% CI 1.69-2.04）以及长期持续戒烟率（RR为1.79, 95% CI 1.60-2.00）。亚组分析显示，远程健康支持干预中的短信和电话干预显著提高了7天内的短期戒烟率（RR为2.10, 95% CI 1.77-2.48）。网站和应用程序干预也对提高7天内的短期戒烟率有积极影响（RR为1.74, 95% CI 1.56-1.94）。

我院临床医学八年制李燊、屈展和李一阳为共同第一作者，马学磊副教授为通讯作者，我院为第一作者单位。
研究通过meta分析检索了PubMed、Embase和Cochrane Library数据库中截至2022年12月的文献，共筛选了2408篇文章，最终纳入39篇文章、17,351名符合条件的参与者、44项研究进行meta分析。研究的主要结局是（7天和30天的）时点戒烟率，次要结局是持续戒烟率。meta分析显示，与传统的戒烟干预措施（传统的标准护理，包括发放戒烟手册、口头宣教）相比，远程健康干预措施可以增加吸烟者的时点戒烟率（RR为1.86, 95% CI 1.69-2.04）以及长期持续戒烟率（RR为1.79, 95% CI 1.60-2.00）。亚组分析显示，远程健康支持干预中的短信和电话干预显著提高了7天内的短期戒烟率（RR为2.10, 95% CI 1.77-2.48）。网站和应用程序干预也对提高7天内的短期戒烟率有积极影响（RR为1.74, 95% CI 1.56-1.94）。
该研究提示，个性化的远程健康支持干预可以有效地帮助吸烟者戒烟，并且可以为进一步的个性化定制，即根据个人背景、戒烟偏好等提供更合适的戒烟选择。
我院临床医学八年制李燊、屈展和李一阳为共同第一作者，马学磊副教授为通讯作者，我院为第一作者单位。
研究通过meta分析检索了PubMed、Embase和Cochrane Library数据库中截至2022年12月的文献，共筛选了2408篇文章，最终纳入39篇文章、17,351名符合条件的参与者、44项研究进行meta分析。研究的主要结局是（7天和30天的）时点戒烟率，次要结局是持续戒烟率。</p>
                                </div>
                            </div>
                        </div>

                        <!-- 文档 -->
                        <div v-if="liveMsg.main_type == 4" class="view-doc">
                            <p>文字记录<span>（{{ timestampToTimeFn(liveMsg.up_time) }}）</span></p>
                            <div class="view-box">
                                <iframe :src="iframeUrl" frameborder="0" width='100%' height='100%'></iframe>
                            </div>
                        </div>

                        <!-- 其它 -->
                        <div v-if="liveMsg.main_type == 6" class="view-box">
                            <a-image :src="qitaCover" rootClassName="ai_mock_layer" />
                        </div>
                    </div>
                    <!-- 右侧边栏信息 -->
                    <SideInfo />
                </div>
            </main>
    </AdminLayout>
</div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, onMounted } from "vue";
import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router';
import { Base64 } from 'js-base64'
import SideTree from "../MediaIndex/components/SideTree.vue";
import AdminLayout from "@/components/AdminLayout/AdminLayout.vue";
import SideInfo from '@/components/SideInfo/index.vue';
import { mediaInfo, getChildMediaList, deleteFrame, shotAnalysis, mediaEdit } from '@/utils/audioVideo';
import { timestampToTimeFn, encodeURI1 } from "@/utils/global";
import { BaseInforOption } from "@/type/mediaDetails"

const qitaCover = new URL("@/assets/img/meadiaIndex/qita-cover.png", import.meta.url).href

const router = useRouter();
const route = useRoute();

const sideTreeRef = ref();
const liveId = ref<any>('');
const liveMsg = ref<any>({});
const iframeUrl = ref<any>([]);
const formState = ref<BaseInforOption>({
    name: "",
    desc: "",
    auth: ''
});
const videoLive1 = ref<any>(null);
const loading = ref(true);

onMounted(() => {
    initData();

    setTimeout(() => {
        loading.value = false;
    }, 1500);
});

const initData = () => {
    liveId.value = route.query.id || '';

    mediaInfo(liveId.value).then(res => {
        // refreshTranscodeing();
        liveMsg.value = res.data.result.data;
        liveMsg.value.playUrl = res.data.result.data.url;
        liveMsg.value.fileType = liveMsg.value.file_name.slice(liveMsg.value.file_name.lastIndexOf(".") + 1).toLowerCase();
        liveMsg.value.width = liveMsg.value.resolution.width;
        liveMsg.value.height = liveMsg.value.resolution.height;
        
        // durationMsg.value = Number(res.data.result.data.duration);
        // currentTime.value = getTimeDuration(Number(res.data.result.data.duration));

        formState.value.name = liveMsg.value.title;
        formState.value.desc = liveMsg.value.description;
        formState.value.auth = liveMsg.value.range == 1 ? '公司媒资库' : '传媒联盟';
        iframeUrl.value = process.env.NODE_ENV == "development" ? `https://stg-mediaresourcelib-business-gateway.hxkjmedia.com/mediaresourcelib-fileview-service/onlinePreview?access_token=${localStorage.getItem('token')}&url=` + Base64.encode(liveMsg.value.playUrl) : `${process.env.VUE_APP_PREFIX}/mediaresourcelib-fileview-service/onlinePreview?access_token=${localStorage.getItem('token')}&url=` + Base64.encode(liveMsg.value.playUrl);
        if (liveMsg.value.main_type == 2) {
            // 如果是视频
            setTimeout(() => {
                initVideo();
            }, 500)

            // searchSnapshotListHandle();
        }
        if (liveMsg.value.main_type == 3) {
            setTimeout(() => {
                initVideo();
            }, 500)
            // let arr = [];
            // arr.push(rightTabFn[2]);
            // rightTabFn = arr;
            // rightTabData.value = arr[0];
            // rightTabIndex.value = 'n3';
        } 
        /*else if (liveMsg.value.main_type == 1) {
            let arr = [];
            arr.push(rightTabFn[1]);
            arr.push(rightTabFn[3]);
            rightTabFn = arr;
            rightTabData.value = arr[0];
            rightTabIndex.value = 'n1';
        } else if (liveMsg.value.main_type == 4) {
            let arr = [];
            arr.push(rightTabFn[3]);
            rightTabFn = arr;
            rightTabData.value = arr[0];
        } else if (liveMsg.value.status == -1) {
        }
        else if (liveMsg.value.main_type == 4 || liveMsg.value.main_type == 5) {
            let arr = [];
            for (let i in state.value.keyList) {
                if (state.value.keyList[i].value == 'ai') continue;
                arr.push(state.value.keyList[i]);
            }
            state.value.keyList = arr;
        }
        */
    });
}
// 选择全部数据
const searchAllData = ()=>{
    // changeCrumb({title:'全部'},0)
    // tabPosition.value ="all"
    // tabChangeTypeFn({target:{id:'0'}})
}

// 点击左侧栏目树
const selectTree = (selectedKeys: any, e: any) => {
    /*
    searchRef.value?.clearInput()
    // 如果不是文件夹tab，需要定位到全部
    if( tabPosition.value != 'folder'){
     tabPosition.value = 'all';
    }
    tabsTable.value[Number(currentTabIndex.value)].searchObj.lastId = "";
    tabsTable.value[Number(currentTabIndex.value)].searchObj["mainType"] = 0;
    breadCrumb.value = [{ title: "全部", file_id: null }];
    if (e.selected) {
        currentTypeId.value = {
            media_resource_id: e.node.id,
            ...e.node
        }
        useFileInfo.setDirectoryId( e.node.id);
        initDataFn({ media_resource_id: e.node.id })
        if (!e.parent) e.parent = e.node.parent
        const arrList = getBreadCrumbByTree(e, [])
        breadCrumb.value = breadCrumb.value.concat(arrList.reverse())
    } else {
        useFileInfo.setDirectoryId("0");
        initDataFn(1)
    }
    */
}


// 操作成功回调
const SuccessfuCallbackFn = () => {
    /*
    tabsTable.value[Number(currentTabIndex.value)].searchObj["lastId"] = '';
    state.checkedList = [];
    similarityFlag.value = false;
    (document.getElementById("admin-page") as any).scrollTop = 0;
    breadMoveCrumb.value = [{ title: "全部", file_id: null }];
    if (currentTypeId.value == "") {
        initDataFn(1);
    } else {
        // 有子目录状态1
        initDataFn(currentTypeId.value);
    }
    */
};

const handNameFn = (item: any) => {
    /*
    filterFlag.value = false;
    selectName.value = item.media_resource_id;
    selectItem.value = "";
    selectItemName.value = item.title;
    selectItemObj.value = item;
    dialogVisibleName.value = true;
    */
};

// 新建监听   isTreeAdd表示是否左侧树里面的新增
const parentChang = (res: string,newFileObj?:any) => {
    /*
    tabPosition.value = 'all';
    if (res == 'folder-success' && useFileInfo.directory_id == '0') {
        tabsTable.value[Number(currentTabIndex.value)].searchObj["lastId"] = "";
        initDataArr.value = [];
        initDataFn(1);
    } else {
        tabsTable.value[Number(currentTabIndex.value)].searchObj["lastId"] = "";
        initDataArr.value = [];
        initDataFn(currentTypeId.value);
    }
    filterFlag.value = false;
       // 新增完，更新左侧对应树
    if(newFileObj){
        refreshTreAdd(newFileObj)
    }
 */
};

// 设置树状选中高亮状态
const setSelectedKeys = (item?: any) => {
    sideTreeRef.value?.setSelectedKeys(item)
}
// 删除左侧树的时候，判断右侧面包屑和内容是否要更新
const handleTreeDelete = (item:any)=>{
    /*
    const _o = breadCrumb.value.find(v=>{
        return item.id == v.media_resource_id
    })
    if(_o){
        // 删除的文件面包屑中有的时候
        tabsTable.value[Number(currentTabIndex.value)].searchObj.lastId = "";
        breadCrumb.value = [{ title: "全部", file_id: null }];
        initDataFn(1)
    }else{
        //  过滤掉删除的数据
        initDataArr.value = initDataArr.value.filter(v=>{
        return v.media_resource_id !=item.id
        })
    }
    */
}
// 移动左侧树时候，，判断右侧面包屑和内容是否要更新
const handleTreeMove = async (item:any) => {
    /*
    const _o = breadCrumb.value.find(v=>{
        return item.id == v.media_resource_id
    })
    // 联动了
    if(_o){
        backStore.netdiskObj.currentTypeId = {media_resource_id:item.id}
        await backStore.setBreadCrumbById()
        breadCrumb.value = backStore.netdiskObj.breadCrumb;
        initDataFn(backStore.netdiskObj.currentTypeId);
    }else{
        //  过滤掉移动掉的数据
        initDataArr.value = initDataArr.value.filter(v=>{
        return v.media_resource_id !=item.id
        })
    }
    */
}

// 更新左侧树的重命名
const refreshTreeName = (item: any) => {
    sideTreeRef.value?.refreshTreeName(item)
}
// 更新左侧树的新增
const refreshTreAdd = (item: any) => {
    // sideTreeRef.value?.refreshTreAdd(item)
    resetTreeData()
}
// 更新左侧树的删除
const refreshDeleteData = (item: any) => {
    // sideTreeRef.value?.refreshDeleteData(item)
    resetTreeData()
}
// 更新左侧树的移动
const refreshTreeMoveData = (item: any) => {
    // sideTreeRef.value?.refreshTreeMoveData(item)
    resetTreeData()
}
// 一些批量操作的，触发左侧树全量更新，
const resetTreeData = () =>{
    sideTreeRef.value?.resetTreeData()
}

const initVideo = (url?: string) => {
    if (videoLive1.value) videoLive1.value.dispose();
    videoLive1.value = new Aliplayer(
        {
            id: 'player_contarn1',
            source: encodeURI1(url || liveMsg.value.playUrl),
            width: '100%',
            height: '100%',
            autoplay: false,
            isLive: false,
            rePlay: false,
            playsinline: false,
            isVBR: true,
            preload: true,
            controlBarVisibility: 'always',
            useH5Prism: true,
            skinLayout: [
                {
                    name: 'H5Loading',
                    align: 'cc'
                },
                {
                    name: 'errorDisplay',
                    align: 'tlabs',
                    x: 0,
                    y: 0
                },
                {
                    name: 'infoDisplay'
                },
                {
                    name: 'tooltip',
                    align: 'blabs',
                    x: 0,
                    y: 56
                },
                {
                    name: 'thumbnail'
                },
                {
                    name: 'controlBar',
                    align: 'blabs',
                    x: 0,
                    y: 0,
                    children: [
                        {
                            name: 'progress',
                            align: 'blabs',
                            x: 0,
                            y: 44
                        },
                        {
                            name: 'playButton',
                            align: 'tl',
                            x: 15,
                            y: 12
                        },
                        {
                            name: 'timeDisplay',
                            align: 'tl',
                            x: 10,
                            y: 7
                        },
                        {
                            name: 'fullScreenButton',
                            align: 'tr',
                            x: 10,
                            y: 12
                        },
                        {
                            name: 'subtitle',
                            align: 'tr',
                            x: 15,
                            y: 12
                        },
                        {
                            name: 'setting',
                            align: 'tr',
                            x: 15,
                            y: 12
                        },
                        {
                            name: 'volume',
                            align: 'tr',
                            x: 5,
                            y: 10
                        }
                    ]
                }
            ]
        },
        function (player: any) {
            player.on('ready', async function () {
                if (liveMsg.value.type == 1) {
                    // isFristSeek.value = false;
                    setTimeout(() => {
                        player.seek(0);
                    }, 2000);
                }
            });
            // player.on('ended', async function () {
            //     videoStopHandle();
            //     if (liveMsg.value.type == 1) {
            //         await player.loadByUrl(lvboUrl.value.indexUrl);
            //         // setCurrentHandle();
            //         // videoPlayHandle();
            //     } else {
            //         acur.value = imgList.value[0].time;
            //         currentTime.value = parseTime(acur.value, '{h}:{i}:{s}');
            //     }
            // });
        }
    );
};

const confirmNav = () => {
    router.push(`/admin/video?id=${liveId.value}`);
};

const backFn = () => {
    if (route.query.location == "3") {
        router.push(`/admin/buyIndex`);
        // backStore.netdiskObj.backStatus = 2;
    } else if (route.query.location == "2" && !route.query.zId) {
        // 2是回收站
        router.push(`/admin/recycle`);
        // backStore.netdiskObj.backStatus = 2;
    } else if (route.query.location == "5") {
        router.push(`/admin/checkIndex?activeTab=${route.query.activeTab}`);
        // backStore.netdiskObj.backStatus = 2;
    }else if (route.query.location == "6" || (route.query.location == "2" && route.query.zId)) {
        // location是6表示是组图详情来的，但是如果是回收站-组图详情来的location就是2，遮掩根据zId再区分一下
        router.push(`/admin/zutuDetail?id=${route.query.zId}&listType=${route.query.listType}&location=${route.query.location}`);
        // backStore.netdiskObj.backStatus = 2;
    } else {
        router.push(`/admin/index`);
        // backStore.netdiskObj.backStatus = 1;
    }
}
</script>

<style src="../MediaIndex/Index.scss" lang="scss" scoped></style>
<style src="./index.scss" lang="scss" scoped></style>
